import React, { Component } from 'react'
import Mytab from '../root/Mytab'
import '../root/business.css'
import pxPage from '../../root/pxPage'
import { getbusidlist, getMsg, delsp, getcommlist } from '../../redux/actionCreator'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
import { Grid } from 'antd-mobile';
import Touxiang from './Touxiang'

const deviceHight = document.documentElement.clientHeight

const itemStyl = {
    height: pxPage(120),
    width: pxPage(100),
    backgroundColor: 'black',
    marginTop: '10px',
    position: 'relative',
}

const dataimg = {
    width: pxPage(80),
    height: pxPage(80),
    position: 'absolute',
    top: pxPage(10),
    left: pxPage(10),
    objectFit: 'cover'
}
const bushomedataitemspanone = {
    // width: pxPage(220),
    // height: pxPage(2),
    position: 'absolute',
    left: pxPage(116),
    top: pxPage(21),
    fontSize: pxPage(15)
}
const dataitembottomimg = {
    width: pxPage(44),
    height: pxPage(44),
}

const getHeight = (deviceHight, num) => {
    let result = deviceHight - pxPage(140 + 175 * num) - 50
    if (result > 0) {
        return result
    } else {
        return 0
    }
}
class Gridbus_comm extends Component {
    constructor(props) {
        super(props);
        this.props.dispatch(getbusidlist(getMsg(this.props).business_id))//根据商家ID去拿到数据
        // this.props.dispatch(getcommlist())
    }
    render() {
        return (
            <div style={{ minHeight: '100vh', display: 'flex', width: '100%' }}>

                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>

                    <div style={{ width: '100%', margin: '0 auto' }}>
                        <Touxiang />
                        <Grid
                            data={this.props.shop}
                            columnNum={1}
                            itemStyle={itemStyl}
                            activeStyle={false}
                            onClick={dataItem => {
                                this.props.history.push('/comment/dateil')
                                localStorage.setItem('commdetail', JSON.stringify(dataItem))
                            }}
                            hasLine={false}
                            renderItem={dataItem => (
                                <div className='bushome-dataitem' style={{ width: pxPage(320), height: pxPage(100), borderRadius: '11px', position: 'relative' }}>
                                    <img className='buhome-dataitem-img' style={dataimg} src={`http://www.h5weixin.club:1025/api/image/${dataItem.commodity_pic}`} alt=''></img>
                                    <span className='bushome-dataitem-span-one'
                                        style={bushomedataitemspanone}
                                    >
                                        {/* {getMsg(this.props).business_name}· */}
                                        {dataItem.commodity_title}</span>
                                </div>
                            )}
                        />
                    </div>

                    <Mytab />

                </div>
                <div style={{ flex: '1' }}></div>
            </div>

        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
    shop: state.shop,
    business: state.business
})
export default withRouter(connect(mapStateToProps)(Gridbus_comm))